<template>
    <AppLayout>
        <!-- <button @click="navigate('/pages/article/list?page=articleList')">跳转文章列表</button>
        <button @click="navigate('/pages/login/index')">登录页</button> -->
        <AppJumpButton url="/pages/article/list" :params="{ page: 'articleList' }">跳转文章列表</AppJumpButton>
        <AppJumpButton url="/pages/login/index">登录页</AppJumpButton>
        <AppSection title="上传文件">
            <AppUploadFile v-model="uploadFile.list" mode="image"></AppUploadFile>
        </AppSection>
        <AppSection title="进度条">
            <button @click="progress.percent = tool.randomNum(0, 100)">改变进度条</button>
            <AppProgress :percent="progress.percent"></AppProgress>
        </AppSection>
        <AppSection title="弹出层">
            <view class="dir-left-nowrap">
                <AppJumpButton><text @click="showPopup('top')">上边</text></AppJumpButton>
                <AppJumpButton><text @click="showPopup('bottom')">下边</text></AppJumpButton>
                <AppJumpButton><text @click="showPopup('center')">中间</text></AppJumpButton>
                <AppJumpButton><text @click="showPopup('left')">左边</text></AppJumpButton>
                <AppJumpButton><text @click="showPopup('right')">右边</text></AppJumpButton>
            </view>
            <AppPopup v-model="show" :type="showType" :isMaskClick="true" @close="close">
                <scroll-view style="height: 300px;" :scroll-y="true" :refresher-enabled="true">
                    <view v-for="v in 600" :key="v">{{ v }}</view>
                </scroll-view>
            </AppPopup>
        </AppSection>
        <AppSection title="步进器">
            <AppInputNumber v-model="num"></AppInputNumber>
        </AppSection>
        <AppSection title="过渡动画">
            <button @click="uniTransitionShow = !uniTransitionShow">切换动画</button>
            <UniTransition :show="uniTransitionShow" modeClass="fade">
                动画盒子
            </UniTransition>
        </AppSection>
        <AppSection title="商品多规格组件">
            <button @click="goodsSku.goodsSkuShow = !goodsSku.goodsSkuShow">打开</button>
            <AppGoodsSku v-model="goodsSku.goodsSkuShow" :goodsInfo="goodsSku.goodInfo"></AppGoodsSku>
        </AppSection>
        <AppSection title="UParse富文本解析">
            <AppParse :content="content"></AppParse>
        </AppSection>
    </AppLayout>
</template>

<script setup lang="ts">
import { usePage } from "@/hooks";
import { tool } from "@/lib";
import AppLayout from "@/components/AppLayout/index.vue";
import AppSection from "@/components/AppSection/index.vue";
import AppPopup, { AppPopupProps } from "@/components/AppPopup/index.vue";
import AppJumpButton from '@/components/AppJumpButton/index.vue';
import AppInputNumber from "@/components/AppInputNumber/index.vue";
import UniTransition from "@/uni_modules/uni-transition/components/uni-transition/uni-transition.vue";
import AppGoodsSku from "@/components/AppGoodsSku/index.vue";
import AppParse from "@/components/AppParse/index.vue";
import AppUploadFile from "@/components/AppUploadFile/index.vue";
import AppProgress from "@/components/AppProgress/index.vue";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";

const { navigate } = usePage()
onMounted(() => {
    console.log('初始化完成当前页面：', tool.getRouteWithOption());
})
const log = () => {
    console.log('ok');
}
const close = (data: { value: AppPopupProps['modelValue'], type: AppPopupProps['type'] }) => {

}
const show = ref(false)
const showType = ref<AppPopupProps['type']>('top')
const showPopup = (type: AppPopupProps['type']) => {
    showType.value = type
    show.value = true
}
const num = ref(50)
const uniTransitionShow = ref(true)
const goodsSku = reactive({
    /**未完成 */
    goodsSkuShow: false,
    goodInfo: {
        id: '1',
        goods_name: '商品一',
        goods_thumb: 'https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530',
        spec_list: [
            {
                list: [
                    {
                        name: "20ml"
                    },
                    {
                        name: "50ml"
                    },
                    {
                        name: "70ml"
                    }
                ],
                name: "规格"
            },
            {
                list: [
                    {
                        name: "红"
                    },
                    {
                        name: "黑"
                    },
                    {
                        name: "彩"
                    }
                ],
                name: "颜色"
            },
        ],
        sku_list: [
            {
                id: "1",
                goods_id: "1",
                goods_name: "迪奥香水1",
                goods_thumb: "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
                price: '19800',
                sku_name_arr: ["20ml", "红"],
                stock: '1001'
            },
            {
                id: "2",
                goods_id: "1",
                goods_name: "迪奥香水2",
                goods_thumb: "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
                price: '9800',
                sku_name_arr: ["20ml", "黑"],
                stock: '1002'
            },
            {
                id: "3",
                goods_id: "1",
                goods_name: "迪奥香水3",
                goods_thumb: "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
                price: '9800',
                sku_name_arr: ["20ml", "彩"],
                stock: '1003'
            },
            {
                id: "4",
                goods_id: "1",
                goods_name: "迪奥香水4",
                goods_thumb: "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
                price: '19800',
                sku_name_arr: ["50ml", "红"],
                stock: '1004'
            },
            {
                id: "5",
                goods_id: "1",
                goods_name: "迪奥香水5",
                goods_thumb: "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
                price: '9800',
                sku_name_arr: ["50ml", "黑"],
                stock: '1005'
            },
            {
                id: "6",
                goods_id: "1",
                goods_name: "迪奥香水6",
                goods_thumb: "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
                price: '9800',
                sku_name_arr: ["50ml", "彩"],
                stock: '1006'
            },
            {
                id: "7",
                goods_id: "1",
                goods_name: "迪奥香水7",
                goods_thumb: "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
                price: '19800',
                sku_name_arr: ["70ml", "红"],
                stock: '1007'
            },
            {
                id: "8",
                goods_id: "1",
                goods_name: "迪奥香水8",
                goods_thumb: "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
                price: '9800',
                sku_name_arr: ["70ml", "黑"],
                stock: '1008'
            },
            {
                id: "9",
                goods_id: "1",
                goods_name: "迪奥香水9",
                goods_thumb: "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
                price: '9800',
                sku_name_arr: ["70ml", "彩"],
                stock: '1009'
            }
        ],
    }
})

const uploadFile = reactive({
    list: [
        'https://dummyimage.com/600x400/000/fff',
        'https://dummyimage.com/600x400/000/fff',
    ]
})
const content = ref('<div>我是HTML代码</div>')

const progress = reactive({
    percent: 10
})


</script>
<style scoped lang="scss">
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .name {
        background-color: red;
    }
}

.logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
}

.text-area {
    display: flex;
    justify-content: center;
}

.title {
    font-size: 36rpx;
    color: #8f8f94;
}
</style>
